<template>
  <div class="note">
    <div class="navs">
      <navs />
    </div>
    <div class="main">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
    <div class="asides">
      <asides />
    </div>
  </div>
</template>

<script>
import navs from './navs'
import asides from './asides'
export default {
  name: 'NOTE',
  components: {
    navs,
    asides
  }
}
</script>

<style lang="scss" scoped>
.note {
  width: 100%;
  height: 100%;
  display: flex;
  .navs {
    flex: 0 0 8%;
    position: sticky;
    top: 0;
    overflow: hidden;
  }
  .main {
    flex: 0 0 65%;
    overflow: hidden;
  }
  .asides {
    flex: 0 0 25%;
    position: sticky;
    top: 0;
  }
}
</style>
